<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>SuiNav</title>
    <!-- <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css"> -->
    <link rel="stylesheet" type="text/css" href="../static/plugins/suiNav/sui.nav.css" />
    <script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="../static/plugins/suiNav/sui.nav.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .container {
            margin: 10px auto;
        }
        
        .container .body {
            padding: 0px 10px;
            position: relative;
            padding-left: 220px;
        }
        
        .nav-second {
            position: relative;
            width: 210px;
            float: left;
        }
        
        @media only screen and (max-width: 768px) {
            .container .body {
                padding: 0px;
            }
        }
    </style>
</head>

<body>
    <div id="sui_nav" class="sui-nav horizontal">
        <div class="sui-nav-wrapper nav-border nav-line">
            <ul>
                <li><a class="text-primary"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-comment"></span> About</a>
                    <ul>
                        <li><a href="#"><span class="glyphicon glyphicon-edit"></span> editor</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> pencil</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-saved"></span> Level23</a>
                            <span class="indicator">&gt;</span>
                            <ul>
                                <li><a href="#">Level31</a></li>
                                <li><a href="#">Level32</a></li>
                                <li class="hide-in-horizontal"><a href="#">Level33</a>
                                    <ul>
                                        <li><a href="#">Level331</a></li>
                                        <li><a href="#">Level332</a></li>
                                        <li><a href="#">Level333</a></li>
                                        <li><a href="#">Level334</a></li>
                                    </ul>
                                    <span class="indicator">&gt;</span>
                                </li>
                                <li><a href="#">Level34</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="glyphicon glyphicon-save"></span> Level24</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="glyphicon glyphicon-comment"></span> About</a>
                    <ul>
                        <li><a href="#"><span class="glyphicon glyphicon-edit"></span> editor</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> pencil</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-saved"></span> Level23</a>
                            <span class="indicator">&gt;</span>
                            <ul>
                                <li><a href="#">Level31</a></li>
                                <li><a href="#">Level32</a></li>
                                <li class="hide-in-horizontal"><a href="#">Level33</a>
                                    <ul>
                                        <li><a href="#">Level331</a></li>
                                        <li><a href="#">Level332</a></li>
                                        <li><a href="#">Level333</a></li>
                                        <li><a href="#">Level334</a></li>
                                    </ul>
                                    <span class="indicator">&gt;</span>
                                </li>
                                <li><a href="#">Level34</a></li>
                            </ul>
                        </li>
                        <li><a href="#"><span class="glyphicon glyphicon-save"></span> Level24</a></li>
                    </ul>
                </li>
                <li><a class="text-danger"><span class="glyphicon glyphicon-fire"></span> Hello</a></li>
            </ul>
        </div>
    </div>
    <br />
    <div class="container ">
        <div class="nav-second">
            <div id="sui_nav2" class="sui-nav">

            </div>
        </div>
        <div class="body">
            <p>
                <button class="MenuToggle btn btn-default">单击此处显示/关闭导航</button>
                <button class="MenuOpen btn btn-success">单击此处显示导航</button>
            </p>


        </div>
    </div>


    <script type="text/javascript">
        $("#sui_nav2").html(document.getElementById('sui_nav').innerHTML);
        var topbar;
        $(function() {
            topbar = $('#sui_nav').SuiNav({});
            var navbar = $('#sui_nav2').SuiNav({});
            $('.MenuToggle').click(function() {
                console.log("toggle");
                topbar.toggle();
            });
            $('.MenuOpen').click(function() {
                console.log("open");
                topbar.show();
            });
        });
    </script>
</body>

</html>